<template>
  <el-dialog
    v-if="openForm"
    v-model="openBoole"
    :close-on-click-modal="false"
    custom-class="mydialog"
    width="500px"
    title="修改手机号"
    @close="close"
  >
    <el-form
      ref="openRef"
      :model="openForm"
      :rules="rules"
      label-width="120px"
      size="small"
    >
      <el-form-item label="当前姓名：">
        {{ userInfo.realName }}
      </el-form-item>

      <el-form-item label="当前手机号：">
        {{ userInfo.tel }}
      </el-form-item>

      <el-form-item
        label="设置新手机号："
        prop="newPhone"
      >
        <el-input
          v-model="openForm.newPhone"
          clearable
          placeholder="请输入新手机号"
        />
      </el-form-item>

      <div class="dialog-footer">
        <div
          class="dialog-footer"
          style="display:flex;justify-content:center;align-items:center;"
        >
          <el-button
            class="border-btn"
            size="small"
            style="margin-right: 20px;"
            @click="close"
          >
            取消
          </el-button>

          <el-button
            class="main-btn"
            size="small"
            type="primary"
            @click="handlSubmit"
          >
            保存修改
          </el-button>
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import {validateVETel} from '@/utils/validate'
import {getPhone} from '@/api/user'
import {mapActions, mapGetters} from 'vuex'

export default {
  name: 'Phone',
  data() {
    const validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (validateVETel(value)) {
          callback(new Error('手机号格式不正确'))
        } else {
          callback()
        }
      }
    }
    return {
      openBoole: false,
      openForm: {
        newPhone: '',
      },
      rules: {
        newPhone: [{ required: true, validator: validateTel, trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapGetters('user', ['userInfo', 'sideMode', 'baseColor']),
  },

  created() {},

  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},

  // 是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
  methods: {
    ...mapActions('user', ['LoginOut', 'GetUserInfo']),
    open() {
      this.openBoole = true
    },

    close() {
      this.openBoole = false
    },

    handlSubmit() {
      this.$refs.openRef.validate((valid) => {
        if (valid) {
          getPhone({ tel: this.openForm.newPhone }).then((res) => {
            if (res.code === 0) {
              this.$message.success('修改成功')
              this.$store.dispatch('user/GetUserInfo')
              this.close()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
